<template>
	<el-dialog 
			title="Dialog" 
			@close="closeDia" 
			v-model="showDia"
		>
	   		
	    <template v-slot:footer>
	        <el-button @click="confirmDia" type="primary">确定</el-button>
	        <el-button @click="closeDia" type="primary" plain>取消</el-button>
	    </template>
	  </el-dialog>
</template>

<script setup lang="ts">
	import { ref, defineEmits, defineExpose } from 'vue'
	
	const emit = defineEmits(['confirmDia'])
	let showDia = ref<boolean>(false)
	
	const openDia = (): void => {
	  showDia.value = true
	}  
	
	const closeDia = (): void => {
	  showDia.value = false
	}
	
	const confirmDia = (): void => {
	  emit('confirmDia', '弹窗内容事件处理完毕，信息传给父组件。')
	}  
	// vue3中规定，使用了 <script setup> 的组件是默认私有的：
	// 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露
	defineExpose({
	  openDia,
	  closeDia
	})
</script>

<style lang="scss" scoped>
</style>